<template>
    <div class="feed-back-container">
        <el-form :model="feedbackForm" v-if="sendFeedbackMessage">
            <el-form-item>
                <p>
                    Subject
                </p>
                <div @click="" class="feed-back-box">
                    <div @click="paymentFn" class="self-btn">
                        <img v-show="payment" style="margin-right: 8px;" src="../../assets/imgs/icon/Selected icon.png"
                            alt="">
                        <p>Payment issue</p>
                    </div>
                    <div @click="connectionFn" class="self-btn">
                        <img v-show="connection" style="margin-right: 8px;" src="../../assets/imgs/icon/Selected icon.png"
                            alt="">
                        <p>Connection issue</p>
                    </div>
                    <div @click="WingsVPNFn" class="self-btn">
                        <img v-show="WingsVPN" style="margin-right: 8px;" src="../../assets/imgs/icon/Selected icon.png"
                            alt="">
                        <p>WingsVPN issue</p>
                    </div>
                    <div @click="myFn" class="self-btn">
                        <img v-show="my" style="margin-right: 8px;" src="../../assets/imgs/icon/Selected icon.png" alt="">
                        <p>My proposal</p>
                    </div>
                    <div @click="reportFn" class="self-btn">
                        <img v-show="report" style="margin-right: 8px;" src="../../assets/imgs/icon/Selected icon.png"
                            alt="">
                        <p>Report bugs</p>
                    </div>
                    <div @click="requestFn" class="self-btn">
                        <img v-show="request" style="margin-right: 8px;" src="../../assets/imgs/icon/Selected icon.png"
                            alt="">
                        <p>Request to delete my account</p>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <el-input v-model="feedbackForm.emailAddr" placeholder="Your email address"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="feedbackForm.content" placeholder="Your feedback" type="textarea"></el-input>
            </el-form-item>
            <el-form-item style="display: flex;flex-direction: column;">
                <p style="color: #fff;">
                    Picture {{ imgNumber }}/3
                </p>
                <el-upload :class="{ hide: showImg }" v-model:file-list="fileList" :limit="3"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                    :auto-upload="false" :on-change="handleChangeImgs" :on-remove="handleRemove">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button @click="sendFeedback"
                    style="background-color: #107DFB;color: #fff;width: 200px;height: 56px;border: none;">Send</el-button>
            </el-form-item>
        </el-form>
        <div class="feedback-success-container" v-else>
            <img style="width: 120px;height: 120px;" src="../../assets/imgs/icon/done.png" alt="">
            <p style="font-size: 32px;font-weight: 600;color: #fff;padding-top: 50px;padding-bottom: 30px;">
                Feedback
                Successful！</p>
            <el-button style="background-color: #107DFB;width: 200px;height: 56px;border: none;color: #fff;font-size: 16px;"
                @click="sendFeedbackMessage = true">Back</el-button>
        </div>


    </div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { feedbackadd } from '../../apis/feedback.js'
import { ref } from 'vue'
import local from '../../utils/local.js'
import { Base64 } from 'js-base64'

const sendFeedbackMessage = ref(true)
const feedbackForm = ref({
    emailAddr: '',
    content: '',
    fileList: []

})
const fileList = ref([])
const showImg = ref(false)
const imgNumber = ref(0)
const payment = ref(true)
const connection = ref(false)
const WingsVPN = ref(false)
const my = ref(false)
const report = ref(false)
const request = ref(false)
const paymentFn = () => {
    payment.value = true
    connection.value = false
    WingsVPN.value = false
    my.value = false
    report.value = false
    request.value = false
}
const connectionFn = () => {
    payment.value = false
    connection.value = true
    WingsVPN.value = false
    my.value = false
    report.value = false
    request.value = false
}
const WingsVPNFn = () => {
    payment.value = false
    connection.value = false
    WingsVPN.value = true
    my.value = false
    report.value = false
    request.value = false
}
const myFn = () => {
    payment.value = false
    connection.value = false
    WingsVPN.value = false
    my.value = true
    report.value = false
    request.value = false
}
const reportFn = () => {
    payment.value = false
    connection.value = false
    WingsVPN.value = false
    my.value = false
    report.value = true
    request.value = false
}
const requestFn = () => {
    payment.value = false
    connection.value = false
    WingsVPN.value = false
    my.value = false
    report.value = false
    request.value = true
}
const sendFeedback = async () => {
    let formData = {}
    if (payment.value) {
        formData.title = 'Payment issue'
    } else if (connection.value) {
        formData.title = 'Connection issue'
    } else if (WingsVPN.value) {
        formData.title = 'WingsVPN issue'
    } else if (my.value) {
        formData.title = 'My proposal'
    } else if (report.value) {
        formData.title = 'Report bugs'
    } else if (request.value) {
        formData.title = 'Request to delete my account'
    }
    formData.content = feedbackForm.value.content
    formData.email = feedbackForm.value.emailAddr
    formData.img = []
    console.log(fileList.value, 'outFile');
    fileList.value.forEach(item => {
        formData.img.push(item.raw)
    })
    let res = await feedbackadd(formData)
    if (res.data.code === 0) {
        sendFeedbackMessage.value = false
        fileList.value = []
        showImg.value = false
        imgNumber.value = 0
        feedbackForm.emailAddr = ''
        feedbackForm.content = ''
    }
    // console.log(res, 'res---------------');
}

const backToFeedback = () => {
    sendFeedbackMessage.value = true
}

const handleChangeImgs = (uploadFile, uploadFiles) => {
    imgNumber.value = uploadFiles.length
    if (uploadFiles.length >= 3) {
        showImg.value = true
    }
}

// 删除图片时是否展示添加图片
const handleRemove = (file, files) => {
    // console.log(file, 'removeFile_______');
    // console.log(files, 'removeFiles_____');
    // console.log(fileList.value, 'fileList');
    imgNumber.value = files.length
    if (files.length < 3) {
        showImg.value = false
    }
}
</script>

<style lang="scss" scoped>
.feed-back-container {
    height: 100%;

    .feedback-success-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .feed-back-box {
        display: flex;
        flex-wrap: wrap;
        width: 55%;

        .self-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 32px;
            background-color: #4A4458;
            font-size: 14px;
            font-weight: 500;
            color: #CAC4D0;
            border-radius: 8px;
            padding: 5px 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }

    }
}

.avatar-uploader .avatar {
    width: 110px;
    height: 110px;
    display: block;
}

:deep(.el-form-item__content) {
    flex-direction: column;
    align-items: normal;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 110px;
    height: 110px;
    text-align: center;
}

.hide {
    .el-upload--picture-card {
        display: none !important;
    }
}
</style>